<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="${layout} :: common_header(~{::title})">
    <title th:text="${pageTitle}">ContactUs</title>
</head>

<body th:replace="${layout} :: common_body(~{::div.content-wraper})">


<div class="content-wraper contact-wrap">
    <div class="banner">
        <div class="swiper-container banner-container">
            <div class="swiper-wrapper banner-wrapper">
                <div class="swiper-slide" th:each="item:${banners}">
                    <a href="#" >
                        <img th:src="${item.imgUrl}" th:title="${item.title}" class="banner" alt="banner">
                    </a>
                </div>

            </div>
            <div class="swiper-pagination swiper-pagination-white"></div>
        </div>
    </div>

    <div class="container">

        <div class="contact-box">
            <div class="left">
                <div class="title" th:text="${pc.title}">
                    CONTACT
                </div>
                <div class="contact-text" th:utext="${pc.getContent()}"></div>
<!--                <p>GUANGDONG HUAYI TECHNOLOGY CO., LTD.</p>-->
<!--                <p>SWITCHBOARD: 0769-83198288</p>-->
<!--                <p>FAX: 0769-20114254</p>-->
<!--                <p>CONTACT ADDRESS: 77-A4, JUXIANG 1ST ROAD, XIANGWEI COMMUNITY, DALANG TOWN, DONGGUAN CITY</p>-->
            </div>
            <div class="right">
                <img th:src="${pc.image}" alt="地图">
            </div>
        </div>
        <div class="contact-form">
            <div class="title" th:if="${language.equals('en')}">MESSAGE</div>
            <div class="title" th:if="${language.equals('zh')}">在线留言</div>
            <form id="uploadForm">
            <div class="form">
                <div class="w-href">
                    <div class="form-item must">
                        <label>Name</label>
                        <input type="text" name="userName" id="userName">
                    </div>
                    <div class="form-item must">
                        <label>Phone</label>
                        <input type="text" name="phone" id="phone">
                    </div>
                    <div class="form-item">
                        <label>E-mail</label>
                        <input type="text"  name="email" id="email">
                    </div>
                    <div class="error-tip">Please enter your name and phone!</div>
                </div>
                <div class="w-href">
                    <div class="form-item content-input">
                        <label>Content</label>
                        <textarea name="content" id="content" ></textarea>
                    </div>
                </div>
            </div>
            <div class="submit-btn" th:if="${language.equals('en')}">Submit</div>
            <div class="submit-btn" th:if="${language.equals('zh')}">提交</div>
            </form>
        </div>
<script>
    $(function () {
        $('.submit-btn').click(function () {
            var userName = $("#userName").val();
            var phone = $("#phone").val();
            var email = $("#email").val();
            var content = $("#content").val();


            if(userName==''){
                alert("请填写联系人")
                return false;
            }
            if(phone=='' && email==''){
                alert("请填写联系方式")
                return false;
            }
            if(content==''){
                alert("请填写内容")
                return false;
            }
            var language = '[[${language}]]'
            var fd = new FormData($('#uploadForm')[0]);
            $.ajax({
                url: "/message_submit",
                type: "POST",
                dataType: "JSON",
                data: $('#uploadForm').serialize(),
                success: function (res) {
                    if (res.code == 0) {
                        if(language=='zh')
                            alert("留言成功！我们会在24小时联系您")
                        else
                            alert("SUCCESS")
                        window.location.reload();
                    } else {
                        alert(res.msg);
                    }
                    // alert(JSON.stringify(res));
                    return false;
                }
            });


            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            return false;
        })
    })
</script>
    </div>
</div>




</body>

</html>